<template>
    <div class="search">
        <section class="header-logo">
            <img src="@/assets/img/header.png" width="100%">
        </section>
        <section class="title">
            科医人升级设备认证机构查询
        </section>
        <section class="select-type">
            <el-select placeholder="认证类别" style="width: 80%;" v-model="type">
                <el-option v-for="(item, index) in typeOption" :key="index" :label="item.label" :value="item.value">
                    <div class="option-item" style="border-bottom: 1px solid #999;">
                        {{item.label}}
                    </div>
                </el-option>
            </el-select>
        </section>
        <section class="search-input">
            <el-autocomplete
                v-model="search"
                :fetch-suggestions="querySearchAsync"
                :trigger-on-focus="false"
                placeholder="输入医院名称模糊查询" style="width: 80%"/>
        </section>
        <section class="submit">
            <div class="submit-btn" @click="getList">查询</div>
        </section>
    </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
    name: 'search',
    data () {
        return {
            typeOption: [
                {
                    value: 'AOPT',
                    label: 'AOPT超光子'
                },
                {
                  value: "M22王者之冠",
                  label: "M22王者之冠",
                },
              {
                value: "M22王者之尊",
                label: "M22王者之尊",
              }
            ],
            type: '',
            search: '',
            timer: ''
        }
    },
    methods: {
        ...mapMutations(['setName', "setType"]),
        getList() {
            if (this.type == '' || this.search == '') return
            this.$axios.get("/hospital/getList", {params: {
                name: this.search.trim(),
                type: this.type
            }}).then(res => {
                this.pageNum = 1;
                this.tableData = res.data;
                this.setName(this.search)
                this.setType(this.type)
                if (res.data && res.data.length > 0) {
                    this.$router.push({name: 'HospitalVerifySuccess'})
                } else {
                    this.$router.push({name: 'HospitalVerifyFail'})
                }
            })
        },
        querySearchAsync(queryString, cb) {
            this.$axios.get("/hospital/getNameList", {params: {
                name: queryString.trim(),
                type: this.type
            }}).then(res => {
                if (res.data && res.data.length > 0) {
                    let d = res.data
                    clearTimeout(this.timer)
                    this.timer = setTimeout(function(){
                        cb(d)
                    }, 1000+Math.random())
                }
            })
        },
    }
}
</script>
<style lang="css" scoped>
.search {
    position: absolute;
    width: 100%;
    height: 100%;
    padding-bottom: 2.5rem;
    box-sizing: border-box;
}
.header-logo {
    width: 100%;
}
.header-logo img {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.title {
    color: #4849be;
    font-size: 2rem;
    font-weight: bold;
    width: 100%;
    height: 5.5rem;
    line-height: 5.5rem;
}
.search-input {
    margin-top: 3rem;
}
.submit {
    position: relative;
    margin-top: 50px;
    text-align: center;
    width: 100%;
}
.submit .submit-btn {
    width: 100px;
    line-height: 3.5rem;
    background-color: #4849bf;
    color: #fff;
    display: inline-block;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: .1em;
    font-size: 1.5rem;
}
</style>
